import React, { Component } from 'react'
import { connect } from 'react-redux'
import { dataset as datasetDuck } from 'ducks'
import PropTypes from 'prop-types'
import {
  Menu, Button, Input, Accordion, Grid,
} from 'semantic-ui-react'
import Styled from 'styled-components'
import { Switch, Redirect, withRouter } from 'react-router'
import { push } from 'react-router-redux'
import { PrivateRoute } from 'components/route'
import { project as projectDuck} from 'ducks'
import DownloadTask from './download'
import LabelTask from './label'
import DatasetTask from './dataset'
import JudgeTask from './judge'
import ReviewTask from './review'

const SubNavMenu = Styled(Menu)`
  height: 100%;
  min-width:200px;
  .subnav.top {
    padding-top: 30px!important;
  }
  .subnav.section {
    padding-top: 40px!important;
  }
  .dropdown.icon {
    float: right!important;
  }
  .accordion .title {
    color: grey!important;
  }
  .subactive {
    margin-right: -1px!important;
    border-radius: 0!important;
    border-color: #d4d4d5!important;
    border-left: 0!important;
    border-right: 1px solid #fff!important;
  }
`

const SubNavSubItem = Styled(Menu.Item)`
  cursor: pointer
  color: blue!important;
  font-size: 14px!important;
  font-weight: 600!important;
  margin-left: 45px;
  padding-right: 45px!important;
  padding-top: 12px!important;
  padding-bottom: 12px!important; 
`

class Tasks extends Component {
  static propTypes = {
    actionSetActiveTab: PropTypes.func.isRequired,
  }

  componentDidMount = () => {
    const { actionSetActiveTab } = this.props
    actionSetActiveTab('tasks')
  }

  render() {
    const { activeItem, location, match,gotoTab,activeTaskTab } = this.props
    return (
      <Grid style={{height: '100%'}}>
        <Grid.Column width={3} style={{maxWidth: '210px'}}>
          <SubNavMenu vertical tabular style={{ paddingTop: '4em' }}>
            <SubNavSubItem
              className={activeTaskTab === 'label' ? 'subactive' : undefined}
              onClick={() => gotoTab(`${match.url}/label`)}
            >
              <a>
                <span>标注任务</span>
              </a>
            </SubNavSubItem>
            <SubNavSubItem
              className={activeTaskTab === 'review' ? 'subactive' : undefined}
              onClick={() => gotoTab(`${match.url}/review`)}
            >
              <a>
                <span>审核任务</span>
              </a>
            </SubNavSubItem>
            <SubNavSubItem
              className={activeTaskTab === 'judge' ? 'subactive' : undefined}
              onClick={() => gotoTab(`${match.url}/judge`)}
            >
              <a>
                <span>裁决任务</span>
              </a>
            </SubNavSubItem>
            <SubNavSubItem 
              className={activeTaskTab === 'download' ? 'subactive' : undefined}
              onClick={() => gotoTab(`${match.url}/download`)}
            >
              <a>
                <span>下载任务</span>
              </a>
            </SubNavSubItem>
            <SubNavSubItem
              className={activeTaskTab === 'dataset' ? 'subactive' : undefined}
              onClick={() => gotoTab(`${match.url}/dataset`)}
            >
              <a>
                <span>数据集</span>
              </a>
            </SubNavSubItem>
          </SubNavMenu>
        </Grid.Column>
        <Grid.Column width={13} style={{paddingLeft: '60px'}}>
          <Switch location={location}>
            <PrivateRoute path={`${match.url}/download`} component={DownloadTask} />
            <PrivateRoute path={`${match.url}/label`} component={LabelTask} />
            <PrivateRoute path={`${match.url}/review`} component={ReviewTask} />
            <PrivateRoute path={`${match.url}/judge`} component={JudgeTask} />
            <PrivateRoute path={`${match.url}/dataset`} component={DatasetTask} />
            <Redirect from={`${match.url}`} to={`${match.url}/label`} />
          </Switch>
        </Grid.Column>
      </Grid>
    )
  }
}

const mapStateToProps = state => ({
  activeTaskTab: projectDuck.selectors.activeTaskTab(state),
})


const mapDispatchToProps = {
  actionSetActiveTab: datasetDuck.creators.actionSetActiveTab,
  gotoTab: path => push(path),
}

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(Tasks),
)
